5. HTML-code ändern
5.3 HTML-elemente ein- / ausblenden
Man kann HTML-elemente mit dem attribut visibility unsichtbar auf einer seite darstellen. Das macht nur sinn, wenn man sie gezielt sichtbar und ggf. wieder unsichtbar machen kann. Dazu benötigt man die methode getElementById und wiederum die eigenschaft style. Beides wurde schon unter 5.1 behandelt. Zu den dort gezeigten möglichkeiten kommt jetzt noch die möglichkeit ein HTML-element ein- und auszublenden und zu positionieren.
styles lesen
erg = document.getElementById(nr).style.visibility;
oben = document.getElementById(nr).style.top;
links = document.getElementById(nr).style.left;
styles schreiben
document.getElementById(nr).style.visibility =
"visible" | "hidden";
document.getElementById(nr).style.top = "nnpx";
document.getElementById(nr).style.left = "nnpx";
Zu beachten ist auch hier, dass als werte für top und left zeichenketten anzugeben sind.
beispiel 5c - ein / ausblenden
Das beispiel ist sehr umfangreich und wird daher schritt für schritt
erklärt. Es gibt die div-container tab1 und tab2, die beide
beim start des beispiels unsichtbar sind, aber mit einer entsprechenden
menüauswahl sichtbar gemacht werden können. Der container tab1 enthält den
button ausblenden, damit macht man ihn wieder unsichtbar, der
container tab2 verschwindet nach 15 sekunden automatisch, d.h. beim
einblenden des containers wird mit einer zeitgeber-methode bereits das
ausblenden gestartet. Aus dem body-tag der seite werden nur die rahmenden
div-tags der container und die aufrufe der funktionen zum ein- und
ausblenden gezeigt.
container bemerk
Beim ein- und ausblenden der container mit den funktionen tabein und
tabaus wird mit der funktion zeigen der container
bemerk mit verschiedenen hinweisen angezeigt. Die hinweise werden in
einem mehrzeiligen eingabefeld eines formular ausgegeben. Die funktion
zeigen macht den container bemerk sichtbar oder unsichtbar, außerdem
ändert sie für das mehrzeilige eingabefeld bem den wert von
value, obwohl dieses attribut gar nicht definiert ist, auch gar
nicht definiert werden kann. Es ist trotzdem vorhanden. Der funktion wird
beim aufruf als argument die nummer des anzuzeigenden hinweises und die ID
eines containers mitgegeben.
container uhr – digitale uhr
Es gibt einen weiteren div-container, der mit dem aufruf der funktion
uhr eingeblendet wird und dann eine im sekundentakt laufende
digitaluhr anzeigt.
beweglicher container
Das beispiel enthält den weiteren div-container tab3, der nicht ein-
oder ausgeblendet, sondern mit den funktionen huepfen und
ruckhupf über den bildschirm bewegt wird. Das ist schon fast
animation.
Bei der funktion huepfen wird verhindert, dass der container über
den linken bildschirmrand verschoben wird, bei der funktion ruckhupf
wird der container vor dem oberen rand gestoppt. Das muss nicht unbedingt
sein, man kann HTML-elemente ziemlich weit in alle richtungen aus dem
sichtbaren bereich positionieren, sie gehen dabei nicht verloren. Die
bewegung des containers ist ein wenig ungeschickt programmiert, er kommt
nie mehr an seine ausgangsposition zurück und läßt sich nach einigem hin
und her gar nicht mehr bewegen.
EXEC beispiel5c ausführen
impressum
Für den inhalt der homepage hartard-bernhard.de
ist im sinne des pressegesetzes verantwortlich:
Bernhard Hartard
Gerhart-Hauptmann-Ring 18
81737 München
089 / 670 39 90
familie.hartard@t-online.de
salvatorische erklärung
Die seiten meiner homepage enthalten links
zu anderen seiten im Internet, auf deren gestaltung und inhalt ich
keinen einfluss habe. Ich übernehme keine gewähr für den inhalt der
verlinkten seiten, rechtsverstöße waren für mich zum zeitpunkt der
verlinkung auf diesen seiten nicht erkennbar, eine ständige inhaltliche
kontrolle der verlinkten seiten ist mir weder möglich noch zumutbar.
Aus rechtlichen gründen distanziere ich mich ausdrücklich vom inhalt
der verlinkten seiten und mache mir deren inhalt nicht zu eigen.
Diese erklärung gilt für alle auf meinen seiten angezeigten links.
CLOSE anzeige schließen
start
Damit startet die homepage neu, d.h. der Steinbeisser treibt wieder sein unwesen.
anfang
Hier beginnen die informationen dieser homepage
zur person
Hier findet man informationen zur person des verfassers dieser homepage, wer er ist, woher er kommt, was er gelernt hat und was er im verlauf seines lebens so getrieben hat.
spiele
Hier finden man einige spiele, aber keine wüsten ballerspiele, sondern einige echte knobeleien (hirn-jogging), zwei gesellschaftsspiele (Mensch ärgere Dich nicht, Kniffel) und das spiel aller frechen schüler: schiffe versenken.
galerien
Ein wenig heimatliebe muss erlaubt sein und deshalb findet man hier einige bildergalerien von Speyer und von seinem Dom.
backbuch
Das ist eine sammlung von backrezepten, aus verschiedenen quellen zusammengetragen und fast alle mit mehr oder weniger erfolg ausprobiert. Da findet man in den endlosen weiten des Internet natürlich mehr und besseres.
stammbaum
Das gehört eigentlich in den privaten bereich dieser homepage, denn hier wird der stammbaum des verfassers der homepage gezeigt. Weil aber beim testen der anwendung auch der stammbaum der Wittelsbacher entstanden ist, wurde beides hier veröffentlicht. Vielleicht interessiert es jemand.
exit
Hier kann man Google oder eine beliebige seite im Internet aufrufen oder diese homepage verlassen.
kontakt
Hier kann man dem verfasser und eigentümer der homepage eine email schreiben.
privat
Hier kommt man in den privaten bereich der homepage, besser gesagt, man kommt da nicht hinein, denn dieser bereich ist geschützt und nur dem eigentümer der homepage zugänglich.
doku
Hier sind die programmiertechniken dokumentiert, mit deren hilfe die homepage gebastelt wurde. Genauer gesagt man findet hier kurz gefasste bechreibungen von HTML, CSS, MySQL und Javascript. Das findet man im Internet natürlich viel ausführlicher aber für einen ersten einstieg in die seltsame welt der programmierung sind diese beschreibungen durchaus brauchbar.